<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .article {
        color: blue;
        width: 30%;
        float: right;
      }
      .content {
        color: green;
        /* width: 50%; */
      }
    </style>
  </head>
  <body>
    <div class="article">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
      eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci
      luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque
      mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis
      elit. Aliquam mollis interdum libero. Sed sodales placerat egestas.
      Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl
      mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue,
      pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem
      consequat, id maximus erat aliquet. Sed sagittis porta libero sed
      condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam
      quam, accumsan id ultrices ultrices, tempor et tellus.
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
      eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci
      luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque
      mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis
      elit. Aliquam mollis interdum libero. Sed sodales placerat egestas.
    </div>

    <!-- <div style="clear: left"></div> -->
    <!-- both: left & right -->
    <!-- <div style="clear: both"></div> -->

    <div style="color: red; font-size: 18px; clear: both;">
      Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl
      mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue,
      pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem
      consequat, id maximus erat aliquet. Sed sagittis porta libero sed
      condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam
      quam, accumsan id ultrices ultrices, tempor et tellus.
    </div>
  </body>
</html>
